<template>
  <div class="meun-box">
    <el-row :gutter="10">
      <el-col :span="7">
        <div class="grid-content grid-content1">
          <div class="grid-content-1">
            <IconTitle title="系统应用/菜单" imgUrl="yunwei"> </IconTitle>
            <div class="box-card btn-search page-search">
              <div slot="header" class="clearfix">
                <div class="btn-box">
                  <el-button
                    type="info"
                    icon="el-icon-refresh-left"
                    @click="getTreeList"
                  ></el-button>
                  <el-button
                    id="gwButton"
                    type="primary"
                    style="backgroundcolor: #e1b980"
                    icon="el-icon-circle-plus-outline"
                      v-if="permissions.sys_menu_add"
                    @click="addTreeMenu"
                    >新增</el-button
                  >
                  <!-- <el-button
                    type="success"
                    icon="el-icon-edit"
                    size="small"
                    @click="editTreeMenu"
                     v-if="permissions.sys_menu_edit"
                    >编辑</el-button
                  > -->
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-circle-close"
                     v-if="permissions.sys_menu_del"
                    @click="delTreeMenu"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
            <el-tabs v-model="tabIndex" tab-position="left"   @tab-click="openTag">
              <el-tab-pane
                :label="item.label"
                v-for="(item, index) in menuOptionsTree"
                :key="item.id"
              >
                <el-tree
                  :data="item.children"
                  :props="defaultProps"
                  accordion
                  @node-click="handleNodeClick"
                ></el-tree>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
      <el-col :span="9"
        ><div class="grid-content">
          <IconTitle title="菜单编辑" imgUrl="yunwei"> </IconTitle>
          <NewForm ref="addMenuUpdate"  @refreshDataTree="refreshAll"></NewForm>
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="grid-content">
          <IconTitle title="按钮管理" imgUrl="yunwei"> </IconTitle>
          <div class="box-card btn-search page-search">
            <div slot="header" class="clearfix">
              <div class="btn-box">
                <el-button type="info" @click="refreshBtn(true)" :disabled="btnFlag" icon="el-icon-refresh-left"></el-button>
                <el-button
                  id="gwButton"
                  type="primary"
                  style="backgroundcolor: #e1b980"
                  icon="el-icon-circle-plus-outline"
                    v-if="permissions.sys_menu_add"
                  :disabled="btnFlag"
                  @click="addBtn(false)"
                  >新增</el-button
                >
                <el-button type="success"  v-if="permissions.sys_menu_edit" icon="el-icon-edit" :disabled="single"
                 @click="addBtn(true)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-circle-close"
                  :disabled="multiple"
                   v-if="permissions.sys_menu_del"
                  @click="delBtn"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
          <el-table
            :data="btnData"
            border
            style="width: 100%"
            @selection-change="deviceSelectionChange"
          >
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column prop="permission" label="编码" align="center">
            </el-table-column>

            <el-table-column prop="label" label="名称" align="center">
            </el-table-column>
            </el-table-column>
          </el-table>
            <table-form
          v-if="addOrUpdateVisible"
          ref="addOrUpdate"
          @refreshBtnList="refreshBtn(false)"
        ></table-form></div
      ></el-col>
    </el-row>
    <basic-container style='display:none' >
      <div class="avue-crud btn-search">
        <el-form :inline="true">
          <el-form-item>
            <el-button
              v-if="permissions.sys_menu_add"
              icon="el-icon-plus"
              type="primary"
              @click="addOrUpdateHandle(false)"
            >
              添加
            </el-button>
          </el-form-item>
        </el-form>

        <el-table
          border
          v-loading="loading"
          :data="menuList"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildrens' }"
        >
          <el-table-column
            prop="name"
            label="菜单名称"
            :show-overflow-tooltip="true"
            width="180"
          ></el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="100">
            <template slot-scope="scope">
              <i :class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="path"
            label="组件路径"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="type" label="类型" width="90" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.type === '0'"
                >左菜单</el-tag
              >
              <el-tag type="success" v-if="scope.row.type === '2'"
                >顶菜单</el-tag
              >
              <el-tag type="info" v-if="scope.row.type === '1'">按钮</el-tag>
              <el-tag type="info" v-if="scope.row.type === '3'"
                >系统应用</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="keepAlive"
            label="缓冲"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.keepAlive === '0'"
                >关闭</el-tag
              >
              <el-tag type="success" v-if="scope.row.keepAlive === '1'"
                >开启</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="permission"
            label="权限标识"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                icon="el-icon-plus"
                @click="addOrUpdateHandle(false, scope.row.id)"
                v-if="permissions.sys_menu_add"
                >新增
              </el-button>
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="addOrUpdateHandle(true, scope.row.id)"
                v-if="permissions.sys_menu_edit"
                >修改
              </el-button>
              <el-button
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-if="permissions.sys_menu_del"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  delObj,
  fetchMenuTree,
  fetchMenuTreeMenu,
  fetchMenuBtn,
} from "@/api/admin/menu";
import TableForm from "./btn-form.vue";
import NewForm from "./new-menu-form.vue";

import { mapGetters } from "vuex";
import IconTitle from "@/components/icon-title/index.vue";

export default {
  name: "Menu",
  components: { TableForm, IconTitle, NewForm },
  data() {
    return {
      addOrUpdateVisible: false,
      // 遮罩层
      loading: true,
      // 菜单表格树数据
      menuList: [],
      // 菜单树选项
      menuOptions: [],
      menuItem: {},
      menuOptionsTree: [],
      btnFlag: true, // 可以操作按钮了
      single: true, //可以编辑了
      multiple: true, // 选择了一个按钮
tabIndex:'0',
      defaultProps: {
        children: "children",
        label: "label",
      },
      btnData: [],
      btnSelect: [],
    };
  },
  created() {
    this.getList();
    this.getTreeList(); //树形结构
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    deviceSelectionChange(selection) {
      this.btnSelect = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    refreshAll() {
      this.getTreeList();
      this.clearData();
    },
    //获取按钮和菜单默认值
    handleNodeClick(data) {
      this.menuItem = data;
      this.clearData();
      //获取按钮
      if (!data.children) {
        this.btnFlag = false; //表明可以操作按钮
        fetchMenuBtn(true, data.id).then((response) => {
          this.btnData = response.data.data;
        });
      } else {
        this.btnFlag = true;
        this.btnData = [];
      }
      this.editTreeMenu()
      //默认菜单数据
    },
    clearData() {
      this.$refs.addMenuUpdate.init(false);
      this.btnData = [];
      this.btnFlag = true;
      
    },
    //新增
    addTreeMenu() {
      if (this.menuItem) {
        this.$nextTick(() => {
          this.$refs.addMenuUpdate.init(false, this.menuItem.id);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.addMenuUpdate.init(false);
        });
      }
    },
    //编辑
    editTreeMenu() {
      this.$nextTick(() => {
        this.$refs.addMenuUpdate.init(true, this.menuItem.id);
      });

    },
    //删除
    delTreeMenu() {
      let row = this.menuItem;
      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then(() => {
          this.refreshAll();
          this.$message.success("删除成功");
        });
    },
    openTag(data) {
      let index = data.index;
      this.menuItem = this.menuOptionsTree[index];
      this.clearData();

this.editTreeMenu()
    },
    //刷新按钮
    refreshBtn(flag) {
      this.btnData=[]
      fetchMenuBtn(true, this.menuItem.id).then((response) => {
        this.btnData = response.data.data;
        if (flag) {
          this.$message.success("刷新成功");
        }
      });
    },
    //新增按钮
    addBtn(isEdit) {
      this.addOrUpdateVisible = true;
      if (this.btnSelect.length === 1) {
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(isEdit, this.btnSelect[0]);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(isEdit, this.menuItem.id);
        });
      }
    },
    delBtn(){
      this.$confirm('是否确认删除所选的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then( () =>{
          return delObj(this.btnSelect);
        })
        .then(() => {
          this.refreshBtn(false);
          this.$message.success("删除成功");
        });
    },
    getTreeList() {
      this.menuOptionsTree=[]
      fetchMenuTreeMenu().then((response) => {
        this.menuOptionsTree = response.data.data;
        this.tabIndex='0'
        this.menuItem = this.menuOptionsTree[0];
      });
    },
    addOrUpdateHandle(isEdit, id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(isEdit, id);
      });
    },
    getList() {
      this.loading = true;
      fetchMenuTree(false).then((response) => {
        this.menuList = response.data.data;
        this.loading = false;
      });
    },

    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";
@import "@/styles/mixin.scss";
.meun-box {
  .grid-content {
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    height: calc(100vh - 120px);
    box-shadow: 0px 0px 7px 0px #eff2f5;
    .btn-search{
       padding: 10px 0;
    }
  }
  .grid-content1 {
    overflow: auto;
  }
}
</style>